body{
	background: url(../img/bg.png) no-repeat center;
	background-size: 100.3% 100%;
	height: 100vh;
	overflow: hidden;	
	scrollbar-width:none;
}

.wrap {
    width: 1920px;
    height: 1080px;
    position: relative;
    transform-origin: 0 0;
}

.header{
	position: relative;
	width: 100%;
	height: 90px;
	background: url(../img/head.png) no-repeat center;
	text-align: center;		
	.time{
		float: right;
		margin-top: 20px;
		width: 400px;
		#time{
			font-size: 30px;
			font-family: Gabana;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 24px;
			margin-right: 40px;
			letter-spacing: 1px;
		}
	}
	.nav{
		position: absolute;
		top: 15px;
		right: 150px;
		font-size: 20px;
		a{
			margin-right: 30px;
			display: inline-block;
			line-height: 40px;
			span{
				font-size: 18px;
				font-family: PingFang SC;
				font-weight: bold;
				font-style: italic;
				color: #FFFFFF;
				line-height: 38px;
				margin-left: 5px;
			}
			&:last-child{
				width: 136px;
				height: 41px;
				border: 1px solid #5E96EE;
				text-align: center;
			}
		}
	}
}
::-webkit-scrollbar
{
	width: 0px;
	height: 0px;
	background-color: #040525;
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
	border-radius: 10;
	background-color: transparent;
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: transparent;
}
.main{
	padding: 14px 30px;
	box-sizing: border-box;
	width: 100%;	
	.wrap{		
		.title{
			width: 100%;
			font-size: 22px;
			font-family: Alimama ShuHeiTi;
			font-weight: bold;
			font-style: italic;
			color: #FFFFFF;
			line-height: 32px;
			height: 38px;
			text-align: center;
			background: url(../img/tit.png) no-repeat center;
			background-size: 100% 100%;
		}
		.title1{
			width: 100%;
			height: 40px;
			font-size: 22px;
			font-family: Alimama ShuHeiTi;
			font-weight: bold;
			font-style: italic;
			color: #FFFFFF;
			line-height: 36px;
			box-sizing: border-box;
			padding-left: 90px;
			background: url(../img/tit2.png) no-repeat center;
			background-size: 100% 100%;
		}
		.leftDiv{
			width: 430px;
			.box{
				box-sizing: border-box;
				height: 300px;
			}
			.box1{				
				background: url(../img/box1.png) no-repeat center;
				background-size: 100% 100%;
				margin-bottom: 33px;
				.content{
					padding:37px 0 0;
					ul{
						li{
							float: left;
							width: 50%;
							box-sizing: border-box;
							padding-left: 17px;
							.img{
								float: left;
								margin-right: 25px;
							}
							.text{
								float: left;
								text-align: center;
								width: 80px;
								padding-top: 10px;
								p{
									font-size: 24px;
									font-family: Gabana;
									letter-spacing: 2px;
									font-weight: 900;
									color: #00C8FF;									
									&:last-child{
										font-size: 16px;
										font-family: PingFang SC;
										font-weight: 500;
										color: #D4E4F2;
										line-height: 32px;
									}
								}
							}
							&.mt50{
								margin-top: 50px;
							}
						}
					}
				}
			}
			.box2{
				margin-bottom: 33px;
				background: url(../img/bg6.png) no-repeat center bottom;
				background-size: 100%;
				.content{
					position: relative;
					width: 100%;
					height: 252px;
					margin-top: 10px;
					span{
						position: absolute;
						left: 25px;
						cursor: pointer;
						font-size: 20px;
						color: #D4E4F2;
						z-index: 99;
					}
					.up{
						top: 15px;
					}
					.down{
						bottom: 25px;
					}
					.dis{
						opacity: 0.5;
						cursor: not-allowed;
					}
				}
			}
			.box3{
				background: url(../img/bg6.png) no-repeat center bottom;
				background-size: 100%;
				.swiper-pagination{
					bottom: 0px;
				}
				.swiper-pagination-bullet{
					width: 6px;
					height: 6px;
					background: #FFFFFF;
					border-radius: 3px;
				}
				.swiper-pagination-bullet-active{
					width: 24px;
					height: 6px;
					background: #01BBD6;
					border-radius: 3px;
				}
				.content{
					margin-top: 23px;
					padding: 0 0 0 16px;
					width: 100%;					
					box-sizing: border-box;	
					height: 225px;
					overflow-y: auto;
					scrollbar-width:none;					
					
					ul{
						li{
							height: 45px;
							.img{
								width: 32px;
								height: 32px;
								vertical-align: middle;
								img{
									display: block;
									width: 100%;
								}
								p{
									width: 100%;
									height: 100%;
									background: linear-gradient(0deg, #00C8FF 0%, #0C4092 99%);
									border-radius: 15px;
									line-height: 32px;
									text-align: center;
									font-size: 20px;	
									color: #FFFFFF;
									font-family: Gabana;
									font-weight: 900;
									letter-spacing: 3px;
								}
							}
							.info{
								width: 360px;
								margin-left: 6px;
								.txt{
									span{
										font-size: 16px;
										font-family: PingFang SC;
										font-weight: bold;
										color: #D4E4F2;
										line-height: 16px;
										&:last-child{
											font-family: Gabana;
											letter-spacing: 3px;
										}
									}
										
								}
								.track{
									width: 100%;
									height: 6px;
									background: #103978;
									font-size: 0;
									overflow: hidden;
									margin-top: 8px;
									.bar{
										display: inline-block;
										height: 100%;
										vertical-align: top;
										width: 50%;
										background: linear-gradient(90deg, #118BF9 0%, #01BBD6 100%);
										border-radius: 0px 3px 3px 0px;
									}
								}
							}
						}
					}
				}
			}
		}
		.centerDiv{
			width: 920px;			
			position: relative;
			margin: 0 42px;
			.box{
				box-sizing: border-box;
			}
			.box1{
				height: 632px;		
				.content{
					width: 100%;
					height: 100%;
					position: relative;
					.zhuan{
						position: absolute;
						width: 632px;
						left: 144px;
						top: 0;
						bottom: 0;
						background: url(../img/mapBg.png) no-repeat center;
						background-size: 653px 653px;
						animation: myzhuan 6s infinite linear;
						-webkit-animation: myzhuan 6s infinite linear;
						-moz-animation: myzhuan 6s infinite linear;
					}
					.list{
						position: absolute;	
						left: 0;
						bottom: 10px;
						width: 245px;
						ul{
							li{
								width: 100%;
								height: 44px;
								margin-top: 14px;
								box-sizing: border-box;
								padding-left: 15px;
								span{
									font-size: 14px;
									font-family: PingFang SC;
									font-weight: 500;
									color: #D4E4F2;
									line-height: 44px;		
									vertical-align: middle;
									float: left;
									&:nth-child(2){
										font-size: 31px;
										font-family: Gabana;
										font-weight: 900;										
										margin-left: 5px;
										font{
											font-family: PingFang SC;
											font-size: 21px;
										}
									}
									&:nth-child(3){		
										float: right;
										font-size: 17px;
										font-family: PingFang SC;
										font-weight: 500;
										color: #FFFFFF;
									}
								}
							}
							.col1{
								background: linear-gradient(90deg, rgba(30, 176, 216, 0.2) 0%, rgba(30, 176, 216, 0) 100%);
								.col{
									color: #1EB0D8;
								}
							}
							.col2{
								background: linear-gradient(90deg, rgba(0, 90, 255, 0.2) 0%, rgba(0, 90, 255, 0) 100%);
								.col{
									color: #005AFF;
								}
							}
							.col3{
								background: linear-gradient(90deg, rgba(1, 243, 189, 0.2) 0%, rgba(1, 243, 189, 0) 100%);
								.col{
									color: #01F3BD;
								}
							}
							.col4{
								background: linear-gradient(90deg, rgba(138, 138, 255, 0.2) 0%, rgba(138, 138, 255, 0) 100%);
								.col{
									color: #8A8AFF;
								}
							}
						}
					}
					.tan{
						display: none;
						position: absolute;
						width: 428px;
						height: 246px;
						left: 0;
						bottom: 10px;
						background: url(../img/tanBg.png) no-repeat center;
						background-size: 100% 100%;
						box-sizing: border-box;
						padding: 18px 15px;
						.inner{
							width: 100%;
							height: 100%;
							background: linear-gradient(0deg, #0D397A 0%, #081A36 100%);
							border-radius: 20px;
							box-sizing: border-box;	
							border: 1px solid rgba(13, 57, 122, 1);
							span{
								display: inline-block;
								text-align: center;
							}
							.s1{
								width: 135px;
							}
							.s2{
								width: 70px;
							}
							.s3{
								width: 70px;
							}
							.s4{
								width: 70px;
							}
							.thead{
								width: 100%;
								height: 30px;
								font-size: 16px;
								font-family: PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
								background: url(../img/bg5.png) no-repeat center;
								background-size: 100% 100%;
								padding-left: 18px;
								line-height: 30px;
							}
							.tbody{		
								height: 150px;
								overflow-y: auto;
								scrollbar-width:none;
								li{
									font-size: 16px;
									font-family: PingFang SC;
									font-weight: 500;
									color: #01F3BD;
									padding-left: 18px;
									line-height: 30px;
									&:nth-child(even){
										width: 400px;
										height: 30px;
										background: radial-gradient(circle, rgba(39, 89, 158, 0.5) 0%,rgba(39, 89, 158, 0) 100%);
									}
								}
								.error{
									color: rgba(255, 47, 47, 1);
								}
							}
						}
						.name{
							padding: 0 17px;
							line-height: 28px;
							padding: 0 18px;
							margin-bottom: 3px;
							p{
								font-size: 16px;
								font-family: PingFang SC;
								font-weight: bold;
								color: #FCC556;
								&:last-child{
									font-size: 30px;
									color: #fff;
									cursor: pointer;
								}
							}
						}
					}
				}
			}
			.box2{	
				height: 336px;
				padding: 12px 0 0 37px;
				background: url(../img/bg6.png) no-repeat center bottom;
				background-size: 100%;
			}
		}
		.rightDiv{
			width: 430px;
			.box{
				box-sizing: border-box;
				height: 300px;
				background: url(../img/bg6.png) no-repeat center bottom;
				background-size: 100%;
			}
			.box1{				
				margin-bottom: 33px;	
				.content{
					padding: 0 0 0 22px;
					margin-top: 14px;
					ul{
						li{
							float: left;
							width: 181px;
							height: 106px;
							box-sizing: border-box;
							padding: 0 25px 018px;
							border: 1px solid;
							border-image: linear-gradient(0deg, #5FA2FC, #081B37) 10 10;
							background: linear-gradient(0deg, #0D397A 0%, #081A36 100%);
							.top{
								p{
									font-size: 16px;
									font-family: PingFang SC;
									font-weight: 500;
									color: #D4E4F2;									
									vertical-align: middle;
									&:last-child{
										line-height: 60px;
									}
								}
							}
							.bot{
								font-size: 11px;
								font-family: PingFang SC;
								font-weight: 500;
								color: #D4E4F2;
								span{
									font-size: 24px;
									font-family: Gabana;
									font-weight: 900;
									color: #00C8FF;
									line-height: 24px;
									letter-spacing: 3px;
								}
							}
						}
						.ml22{
							margin-left: 22px;
						}
						.mt23{
							margin-top: 23px;
						}
					}
				}
			}
			.box2{
				margin-bottom: 33px;	
				
				.content{
					margin-top: 21px;
					padding: 0 16px 0 30px;
					.chat{
						position: relative;
						float: left;
						width: 174px;
						height: 174px;
						background: url(../img/bg4.png) no-repeat center;
						margin-top: 14px;
						.zhuan{
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							background: url(../img/bg3.png) no-repeat bottom;
							background-size: 100%;
							animation: myzhuan 6s infinite linear;
							-webkit-animation: myzhuan 6s infinite linear;
							-moz-animation: myzhuan 6s infinite linear;
						}
					}
					.txt{
						float: left;
						width: 172px;
						margin-left: 38px;
						&>div{
							border-radius: 0px 15px 15px 0px;
							overflow: hidden;
							width: 100%;
							height: 52px;
							margin-bottom: 22px;
						}
						p{
							width: 170px;
							height: 100%;
							border: 2px solid;							
							box-sizing: border-box;							
							border-left: none;
							span{
								font-size: 14px;
								font-family: PingFang SC;
								font-weight: 500;
								color: #D4E4F2;
								line-height: 52px;
								letter-spacing: 2px;
								&:last-child{
									font-size: 20px;
									font-family: Gabana;
									font-weight: 900;
									color: #FFFFFF;
									margin-left: 10px;
								}
							}
						}
						.p1{
							border-image: linear-gradient(to left, rgba(0,201,255,0.3), rgba(0,201,255,0)) 15 15;
							background: linear-gradient(to right, rgba(0,201,255,0), rgba(0,201,255,0.3));
						}
						.p2{
							border-image: linear-gradient(to left,  rgba(0,252,193,0.3), rgba(0,252,193,0)) 15 15;
							background: linear-gradient(to right, rgba(0,252,193,0), rgba(0,252,193,0.3));
						}
						.p3{
							border-image: linear-gradient(to left,  rgba(189,147,64,0.3), rgba(189,147,64,0)) 15 15;
							background: linear-gradient(to right, rgba(189,147,64,0), rgba(189,147,64,0.3));
						}
						
					}
				}
			}
			.box3{
				.content{
					padding:20px;
					img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		
	}	
}
@keyframes myzhuan {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0); }
}

@-moz-keyframes myzhuan {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0); }
}

@-webkit-keyframes myzhuan {
  0% { -webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0); }
}